<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-toolbar-title class="text-center">
          <q-btn class="fixed-top-left q-mt-xs" round flat icon="mdi-arrow-left" v-if="showGoBack" @click="goBack" />
          {{ tabName }}
        </q-toolbar-title>

      </q-toolbar>
    </q-header>
    <q-page-container>
      <router-view />
    </q-page-container>
    <q-footer elevated class="bg-white">
      <q-toolbar class="row">
        <q-tabs v-model="tab" dense active-color="light-blue" indicator-color="light-blue" align="justify" narrow-indicator class="col text-grey-9"
          @input="changeTab">
          <q-tab name="home" icon="mdi-cog-outline" label="功能列表" />
          <q-tab name="msg" icon="mdi-monitor-eye" label="待办消息" />
          <q-tab name="user" icon="perm_identity" label="我的" />
        </q-tabs>
      </q-toolbar>
    </q-footer>
  </q-layout>
</template>

<script>
import { goLogin } from 'boot/api';
import routes, { staticRouters } from 'boot/routes';
import router, { resetRouter } from 'src/router';

export default {
  name: 'PhoneLayout',
  components: {},
  data() {
    return {
      tab: 'home',
      tabName: '功能列表',
    };
  },
  methods: {
    changeTab() {
      const { path } = this.$route;
      this.showMenu = this.tab === 'home';
      this.changeTabName();
      if (path !== `/phone/${this.tab}`) {
        this.$router.replace(`/phone/${this.tab}`);
      }
    },
    changeTabName() {
      if (this.tab === 'home') { this.tabName = '功能列表'; }
      if (this.tab === 'msg') { this.tabName = '待办消息'; }
      if (this.tab === 'user') { this.tabName = '我的'; }
      document.title = this.tabName;
    },
    goBack() {
      this.$router.go(-1);
    },
    changeTitle(title) {
      if (title) {
        if (title.split(' — ').length > 1) {
          [this.tabName] = title.split(' — ');
        } else {
          this.tabName = title;
        }
      }
    },
  },
  mounted() {
    this.changeTabName();
  },
  computed: {
    showGoBack() {
      const noBackList = ['/', '/phone/home', '/phone/msg', '/phone/user'];
      const { path } = this.$route;
      return noBackList.indexOf(path) === -1;
    },
  },
};
</script>
